<template>
    <div class="l_authority">
        <el-card class="box-card">
            <!-- 按钮 -->
            <!-- <el-button type="primary" @click="dialogFormVisible = true">新增角色</el-button> -->
            <!-- 弹窗 -->
            <el-dialog title="新增角色" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="角色名" :label-width="formLabelWidth">
                        <el-input v-model="form.username" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="danger" @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 内容 -->
            <el-table :data="userlist">
                <el-table-column label="id" prop="id" min-width="60"></el-table-column>
                <el-table-column label="类型" prop="type" min-width="60">
                 <template slot-scope="scope">
                         {{ getType(scope.row) }}
                 </template>
                </el-table-column>
                <el-table-column label="作者id" prop="user_id" min-width="100"></el-table-column>
                <el-table-column label="标题" prop="title" min-width="100"></el-table-column>
                <el-table-column label="描述" prop="describe" min-width="140"></el-table-column>
                <el-table-column label="发布内容" prop="content" min-width="140">
                    <template slot-scope="scope">
                        <div v-html="getContent(scope.row)"></div>
                    </template>
                    </el-table-column>
                <el-table-column label="点赞数" prop="likes_number" min-width="140"></el-table-column>
                <el-table-column label="评论数" prop="comment_number" min-width="140"></el-table-column>
                <el-table-column label="转发数" prop="share_number" min-width="140"></el-table-column>
                <el-table-column label="审核状态" prop="examine_status" min-width="140">
                <template slot-scope="scope">
                     {{ getExamineStatus(scope.row) }}
                </template>
                </el-table-column>
                <el-table-column label="操作" min-width="200">
                    <template slot-scope="scope">
                        <el-button @click="passClick(scope.row)" type="text" size="small" icon="el-icon-plus">通过</el-button>
                        <el-button @click="refuseClick(scope.row)" type="text" size="small"
                            icon="el-icon-lock">拒绝</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>

import util from "../../utils/request"

export default {
    name: "authority",
    data() {
        return {
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                username: '',
                password: '',
                name: '',
                phone: ''
            },
            formLabelWidth: '120px',
            userlist: [
                {
                    id: '',
                    sn: '',
                    name: '',
                    phone: '',
                    address: '',
                    cat_room_name: '',
                    target_build_number: 0,
                    cat_images: [],
                    ambience_images: [],
                    raise_build_number: 0,
                },
            ],
            queryInfo: {
                query: '',
                pagenum: 1,
                pagesize: 2
            }
        };
    },
    created() {
        this.getApplyList();
    },
    methods: {
        async getApplyList() {
            var _this = this;
            var myToken = window.localStorage.getItem("token");
            var dataObj = {};
            dataObj.page = 1;
            dataObj.limit = 10;
            util.call_netA("post", "/admin/social-circle/list", dataObj, function (data) {
                var res = data.data;
                if (!myToken) {
                    _this.$message({
                        message: res.msg,
                        center: true,
                        type: 'success'
                    });
                    _this.$router.push('/');
                } else {
                    if (res.code == 200) {
                        var data = res.data.data;
                        console.log(data)
                        _this.userlist = data;
                    }

                }
            }, function (err) { }, myToken)


            // const { data:res } = await this.$http.post("users",this.queryInfo);
            // if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
            // this.menulist = res.data
            // console.log(res)
        },
        //审核通过
        passClick(row) {
            //todo 璐姐 弹出窗二次确认?

            var _this = this;
            var myToken = window.localStorage.getItem("token");
            _this.$refs.createObj.validate(valid => {
                if (!valid) return false;
                var dataObj = {
                    id: row.id,
                    examine_status: 1,
                }
                util.call_netA("post", "/admin/social-circle/examine", dataObj, function (data) {
                    // 刷新页面
                    _this.$router.go(0);
                }, function (err) { }, myToken)
            })

        },

        //审核拒绝
        refuseClick(row) {
            //todo 璐姐 弹层, 输入错误原因

            var _this = this;
            var myToken = window.localStorage.getItem("token");
            var reason = "todo 璐姐 改下获取错误原因"

            _this.$refs.createObj.validate(valid => {
                if (!valid) return false;
                var dataObj = {
                    id: row.id,
                    examine_status: 2,
                    examine_content: reason,
                }
                util.call_netA("post", "/admin/social-circle/examine", dataObj, function (data) {
                    // 刷新页面
                    _this.$router.go(0);
                }, function (err) { }, myToken)
            })

            console.log(row);
        },
        //发布内容转换
        getContent(row){
             if (row.examine_status == 0) {
                return row.content;
            } else if (row.examine_status == 1) {
                  // 图文
                const imageElements = row.images.map((url, index) => (
                    /*todo 璐姐 改下多图样式*/

                    `<img src="${url}" alt="Image ${index + 1}" width=100 height=100 />`
                ));
                return `<p>${row.content}</p>${imageElements.join('')}`;
            } else if (row.examine_status == 2) {
                return `<video src="${row.cat_room_name}" controls></video>`; // 视频
            }
        },
        //类型转换
        getType(row) {
            if (row.examine_status == 0) {
                return "文本";
            } else if (row.examine_status == 1) {
                return "图文";
            } else if (row.examine_status == 2) {
                return "视频";
            }
        },
        //审核状态转换
        getExamineStatus(row){
            if (row.examine_status == 0) {
                return "待审核";
            }else if (row.examine_status == 1) {
                return "通过";
            } else if (row.examine_status == 2) {
                return "驳回";
            }
        },
    },
};
</script>

<style scoped>
</style>
